<script setup lang="ts">
import {ref, onMounted, reactive, computed} from "vue";
import { useCourseApi } from "/src/api/course";

import MainHeader from "/@/components/common/main-header.vue";
import {ElMessage, ElMessageBox} from "element-plus";

const lxsAppData = reactive({
	data: [],
	params: {
		page: 1,
		page_size: 10,
	},
	total: 0,
	newsContent: {},
})

// 查看内容
const contentShow = ref(false)
const contentClick = (id) => {
	contentShow.value = true;
	lxsAppData.newsContent.id = id;
	lxsAppData.newsContent.content = lxsAppData.data.find(item => item.id === id).course_photo;
}

// 获取页面数据
const getPageData = async () => {
	const res = await useCourseApi().getMountCourseList(lxsAppData.params);
	console.log('获取新闻列表数据', res.data);
	lxsAppData.data = res.data.list;
	lxsAppData.total = res.data.total;
}

onMounted(() => {
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">
		<div class="layout-main">

			<MainHeader />

			<div class="main-content">
				<el-card shadow="hover" class="layout-padding-auto">

					<div class="content-box2">
						<div class="content-simple2">

							<div class="simple-item2" v-for="(item, index) in lxsAppData.data" :key="index">
								<el-image :src="item.course_bg"></el-image>
								<div class="simple-item-tan" @click="contentClick(item.id)">
									<p>点击查看教程</p>
								</div>
							</div>

						</div>
					</div>

				</el-card>
			</div>

		</div>
	</div>

	<!--  查看教程-start	-->
	<el-drawer
		v-model="contentShow"
		direction="rtl"
		size="480"
	>
		<template #header>
			<div class="drawer-header">
				<div class="header-left">
					<p>查看教程</p>
				</div>
			</div>
		</template>
		<div class="drawer-content">
			<el-image :src="lxsAppData.newsContent.content" lazy fit="widthFix"></el-image>
		</div>
	</el-drawer>
	<!--  查看教程-end	-->
</template>

<style lang="scss">
@media screen and (max-width: 500px) {
	.el-drawer {
		width: 100% !important;
	}
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1200px) {
	.main-content {
		font-size: 12px !important;
	}
	.simple-item2 {
		width: 48% !important;
	}
}
@media screen and (max-width: 960px) {
	.simple-item2 {
		width: 100% !important;
		font-size: 12px !important;
	}
}
.content-box2 {
	width: 100%;
	min-height: 78vh;
	background: #FFFFFF;
	margin-top: 12px;

	.content-simple2 {
		margin: 0 24px 24px 24px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 100%;

		.simple-item2 {
			width: 32.5%;
			max-height: 235px;
			position: relative;
			margin-top: 20px;

			.el-image {
				width: 100%;
				height: 100%;

				img {
					border-radius: 8px 8px 8px 8px;
				}
			}

			.simple-item-tan {
				width: 100%;
				height: 48px;
				background: linear-gradient(360deg, #FC661C 0%, rgba(242,140,68,0) 100%);
				border-radius: 0 0 8px 8px;
				position: absolute;
				bottom: 0;
				cursor: pointer;
				transition: all 0.3s ease-out;

				p {
					font-size: 14px;
					color: #FFFFFF;
					text-align: center;
					line-height: 48px;
				}
			}
		}
		.simple-item2:hover .simple-item-tan {
			background: #FC661C;
		}
	}
}
</style>